<!--
 * @Author: 何 海深 813936564@qq.com
 * @Date: 2024-03-28 20:17:57
 * @LastEditors: 何 海深 813936564@qq.com
 * @LastEditTime: 2024-03-28 21:04:04
 * @FilePath: \fgw-one-map-vue-v2\src\components\modleTitle\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="modle-title">
    <div :class="`title ${bgImgClass}`">
      <div class="title-text">
        {{ props.title }}
        <div class="title-left">
          <!-- 标题后面左侧自定义按钮 -->
          <slot name="title-left"></slot>
          <div class="input-search" v-if="isSearch">
            <z-input-search
              v-model:value="props.value"
              placeholder="请输入关键词"
              @onSearch="onSearch"
              size="small"
            />
          </div>
          <div class="onDownload" @click.stop="onDownload" v-if="isDownload">
            下载<img src="../../assets/images/globalCommon/download.png"/>
          </div>
        </div>
      </div>
      <div class="title-more">
        <div class="onMore" @click.stop="onMore" v-if="isMore"></div>
      </div>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { DownloadOutlined } from '@ant-design/icons-vue'
import ZInputSearch from '@/components/z-input-search/index.vue'
interface PropsType {
  title: string
  isMore: boolean
  isDownload: boolean
  bgImgClass: string
  value: string
  isSearch: boolean
}
const props = withDefaults(defineProps<PropsType>(), {
  title: '项目概览',
  isMore: true,
  isDownload: true,
  bgImgClass: 'shortImage',
  value: '',
  isSearch: false
})
const emit = defineEmits(['onMore', 'onDownload', 'onSearch'])
// 父级更多
const onMore = () => {
  emit('onMore')
}
// 父级下载
const onDownload = () => {
  emit('onDownload')
}
const onSearch = () => {
  emit('onSearch')
}
</script>
<style lang="scss" scoped>
.modle-title {
  width: 100%;
  height: auto;
  .shortImage {
    background: url('@/assets/images/components/modleTitle/bg_top_title.png') no-repeat;
    background-size: 824vw * $Bw 100%;
  }
  .longImage {
    background: url('@/assets/images/components/modleTitle/bg_top_title2.png') no-repeat;
    background-size: 1826vw * $Bw 100%;
  }
  .longestImage {
    background: url('@/assets/images/components/modleTitle/bg_top_title3.png') no-repeat;
    background-size: 3709vw * $Bw 100%;
  }
  .title {
    width: 100%;
    height: 90vh * $Bh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 36vh * $Bh;
    .title-text {
      flex: 1;
      display: flex;
      align-items: center;
      margin-left: 100vw * $Bw;
      margin-top: -10vh * $Bh;
      font-weight: bold;
      .title-left {
        font-size: 26vh * $Bh;
        font-weight: normal;
        display: flex;
        align-items: center;
        & > div {
          margin-left: 36vw * $Bw;
        }
        .input-search {
          margin-left: 34vw * $Bw;
        }
        .onDownload {
          width: 146vw * $Bw;
          height: 56vh * $Bh;
          background: linear-gradient(to right, #1781c3, #153d96);
          border: 2vh * $Bh solid #4f86e0;
          border-radius: 6vh * $Bh;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            margin-left: 13vw * $Bw;
          }
        }
      }
    }
    .title-more {
      display: flex;
      align-items: center;
      & > div {
        margin-right: 24vw * $Bw;
      }
      .onMore {
        width: 48vw * $Bw;
        height: 40vh * $Bh;
        background: url('/src/assets/images/components/modleTitle/more.png') no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
  }
  .content {
    width: 100%;
    height: auto;
    margin-top: 38vh * $Bh;
    background-color: #0c2357;
    border-radius: 12vh * $Bh;
    padding: 32vh * $Bh 32vw * $Bw;
  }
}
</style>
